<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <script src="图片裁剪.js"></script>
        <script type="text/javascript" src="jquery-1.8.1.min.js"></script>
		<script type="text/javascript" src="jquery-ui-1.10.4.custom.min.js"></script>
        <style type="text/css">
            body
            {
                background: #333;
            }
            #box
            {
                position:absolute;
                top:100px;
                left: 200px;
                width:300px;
                height: 296px;
            }
            #img1
            {
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.9;
            }
            #img2
            {
                position: absolute;
                top:0;
                left:0;
                clip: rect(0,100px,100px,0);
            }
            #main
            {
                border: 1px solid #abd;
                width:100px;
                height: 100px;
                position: absolute;
            }
            .minDiv
            {
                position: absolute;
                width:4px;
                height:4px;
                background-color: bisque;
            }
            .left-up
            {
                left:-2px;
                top:-2px;
                cursor: nw-resize;
            }
            .up
            {
                left:50%;
                margin-left:-2px;
                top:-2px;
                cursor: n-resize;
            }
            .right-up
            {
                top:-2px;
                right:-2px;
                cursor: ne-resize;
            }
            .right
            {
                top:50%;
                margin-top:2px;
                right:-2px;
                cursor: e-resize;
            }
            .right-down
            {
                right:-2px;
                bottom:-2px;
                cursor: se-resize
            }
            .down
            {
                left:50%;
                margin-left:-2px;
                bottom: -2px;
                cursor: s-resize;
            }
            .left-down
            {
                left:-2px;
                bottom: -2px;
                cursor: sw-resize;
            }
            .left
            {
                top:50%;
                left:-2px;
                margin-top:-2px;
                cursor: w-resize;
            }
            #box1
            {
                position: absolute;
                left:520px;
                top:100px;
                width:300px;
                height:296px;
            }
            #img3
            {
                position: absolute;
                top:0;
                left：0；
            }
        </style>
    </head>
    <body>
        <div id="box">
            <img src="1.JPG" id="img1" />
            <img src="1.JPG" id="img2" />
            <div id="main">
                <div id="left-up" class="minDiv left-up"></div>
                <div id="up" class="minDiv up"></div>
                <div id="right-up" class="minDiv right-up"></div>
                <div id="right" class="minDiv right"></div>
                <div id="right-down" class="minDiv right-down"></div>
                <div id="down" class="minDiv down"></div>
                <div id="left-down" class="minDiv left-down"></div>
                <div id="left" class="minDiv left"></div>
            </div>
        </div>
        <div id="box1">
            <img src="1.JPG" id="img3" />
        </div>
    </body>
</html>